<template>
  <div class="container">
    <div class="heard">
      <div>
        <span>关键字</span>
        <el-input
          placeholder="请输入内容"
          style="width: 200px"
          v-model="searchData"
          clearableb
        >
        </el-input>
      </div>
      <div>
        <el-button
          type="primary"
          @click="clearNav"
        >清除</el-button>
        <el-button
          type="success"
          @click="searchNav"
        >搜索</el-button>
      </div>
    </div>
    <el-alert
      :title="'数据一共'+total+'条'"
      type="info"
      show-icon
    >
    </el-alert>
    <el-card>
      <el-table
        :data="tableData"
        style="widows: 50%"
        border
        stripe
      >
        <el-table-column
          label="编码"
          prop="id"
        > </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="180"
        >
          <template slot-scope="scoped">
            <span v-if="scoped.row.questionType ==='3' ">简答</span>
            <span v-else-if="scoped.row.questionType === '2'">多选</span>
            <span v-else>单选</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="questionIDs"
          label="题目编码"
          width="200"
        >
          <template slot-scope="scoped">
            <p
              v-for="(item,index) in scoped.row.questionIDs "
              :key="index"
            >{{item.number}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间（s）"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率（%）"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="录入人"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteGoodsById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页效果 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[20,40,80]"
        background
        :page-size="queryInfo.pagesize"
        layout="prev, pager, next,sizes,total"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'

export default {
  data() {
    return {
      queryInfo: {
        keyword: '',
        // 当前页面
        page: 1,
        // 分页
        pagesize: 20
      },
      list: [],
      searchData: '', // 搜索内容,
      tableData: [],
      total: 0
    }
  },
  created() {
    this.getGoodsList()
    // this.pageList()
  },
  methods: {
    pageList() {
      this.getList()
    },
    getList() {
      // es6过滤得到满足搜索条件的展示数据list
      var list = this.tableData.filter((item, index) =>
        item.questionIDs.includes((this.searchData))

      ) // 搜索符号条件的内容
      console.log(this.item)
      console.log(list)
      this.list = list.filter((item, index) =>
        index < this.page * this.pagesize && index >= this.pagesize * (this.page - 1)
      ) // 根据页数显示相应的内容
      this.total = list.length
    },
    async getGoodsList() {
      console.log('getGoodsList')
      const { data } = await randoms(this.queryInfo)
      this.tableData = data.items
      this.total = data.counts
      console.log(data)
    },

    handleSizeChange(size) {
      this.queryInfo.pagesize = size
      this.getGoodsList()
    },
    handleCurrentChange(num) {
      this.queryInfo.page = num
      this.getGoodsList()
    },
    search() {
      this.page = 1
      this.getList()
    },
    async deleteGoodsById(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .catch(async (err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }

      const { items } = await removeRandoms({ id })
      console.log(items)

      // if (items.status !== 200) {
      //   // console.log(items)
      //   return this.$message.error('删除失败！')
      // }

      this.$message.success('删除成功！')
      this.getGoodsList()
    },
    searchNav() {
      this.page = 1
      this.getList()
    },
    clearNav() {
      this.searchData = ''
      this.getGoodsList()
    }
  }
}

</script>

<style scoped lang='less'>
.heard {
  display: flex;
  justify-content: space-between;
  padding: 20px 30px;
  background-color: #ffffff;
  span {
    padding-right: 10px;
  }
}
.el-pagination {
  float: right;
}
</style>
